/**
* @desc 通用 page 页面
* @author 钱炜亮
* @date 2024-04-21
*/
<template>
  <view class="common-page" :class="{ 'tab-page': tab }" :style="{ padding: formatPadding }">
    <slot />
    <!-- 自定义 toast 节点-->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
	props: {
		// 是否自定义导航栏，这时可能要加上顶部适配
		custom: { type: Boolean, default: false },
		// 是否是 tab 页面，这时底部不要适配
		tab: { type: Boolean, default: false },
		// padding 值，默认全部是 0 32rpx
		padding: { type: String, default: '0 32rpx' }
	},
	data() {
		return {
			top: 0
		};
	},
	computed: {
		formatPadding() {
			// padding 值
			let padding = ['0', '0', '0', '0'];
			// 转换成数组
			const paddingList = this.padding.split(' ');
			// 四个值，代表上右下左
			if (paddingList.length === 4) {
				padding = [...paddingList];
			//	三个值，代表上右下，左右相同
			} else if (paddingList.length === 3) {
				padding = [paddingList[0], paddingList[1], paddingList[2], paddingList[1]];
			// 两个值，代表上下，左右相同
			} else if (paddingList.length === 2) {
				padding = [paddingList[0], paddingList[1], paddingList[0], paddingList[1]];

			// 一个值，代表上下左右相同
			} else if (paddingList.length === 1) {
				padding = [paddingList[0], paddingList[0], paddingList[0], paddingList[0]];
			}
			// 最后统一设置顶部
			padding[0] = this.top + 'px';
			return padding.join(' ');
		}
	},
	mounted() {
		// 如果是自定义导航栏，则设置顶部距离
		if (this.custom) this.setTop();
		// 定义 toast 事件监听
		uni.$on('toast', this.showToast);
	},
	onDestroy() {
		// 移除 toast 事件监听
		this.$off('toast', this.showToast);
	},
	methods: {
		/* ====== S 事件区域 ====== */
		/**
     * 显示 toast，如果传入了第二个参数，则会在提示完毕后跳转页面
     * @param toastInfo toast 提示的信息，默认传入一个空字符串，也可以传入各个参数，配置参考 uview 的 toast 组件
     * @param routeInfo 页面跳转的参数，可以传入一个字符串，也可以传入各个参数，配置参考 https://www.uviewui.com/js/route.html
     */
		showToast(toastInfo, routeInfo = null) {
			let toastConfig = {};
			// 仅仅传入字符串，封装一下数据
			if (typeof toastInfo === 'string') {
				toastConfig.message = toastInfo;
			} else {
				toastConfig = { ...toastInfo };
			}
			// 如果传入了第二个参数，则在提示完毕后跳转页面
			if (routeInfo) {
				toastConfig.complete = () => {
					// 参数参考 https://www.uviewui.com/js/route.html
					uni.$u.route(routeInfo);
				};
			}
			this.$refs.uToast.show(toastConfig);
		},
		/* ====== E 事件区域 ====== */
		/* ====== S 通用逻辑 ====== */
		setTop() {
			// 获取手机状态栏高度 -- 默认 20px
			const statusBarHeight = uni.getSystemInfoSync()?.statusBarHeight || 20;
			// // 获取胶囊高度和顶部距离
			// const { height = 0, top = 0 } = uni.getMenuButtonBoundingClientRect() || {};
			// // 计算胶囊顶部和状态栏的距离
			// const instance = top - statusBarHeight;
			// // 设置顶部距离: 胶囊高度 + 状态栏高度 + 顶部距离 * 2
			// this.top = height + statusBarHeight + instance * 2;
			// 设置顶部距离: 状态栏高度,导航栏需要用户自己写
			this.top = statusBarHeight;
		}
		/* ====== E 通用逻辑 ====== */
		/* ====== S 接口定义 ====== */

		/* ====== E 接口定义 ====== */
	}
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
	position: relative;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
.tab-page {
  padding-bottom: 0 !important;
}
.status-bar {
	background: transparent;
	width: 100%;
}
</style>
